import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { ProgressStatus } from '@iux/live';

@Component({
  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
})
export class DynamicComponent implements OnInit, OnDestroy {
  status: ProgressStatus = 'normal';
  value = 0;
  interval;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.interval = setInterval(() => {
      this.status = 'active';
      this.value = this.value + Math.floor(Math.random() * 10) + 1;
      if (this.value >= 100) {
        this.value = 100;
        const timer = setTimeout(() => {
          this.value = 0;
          this.status = 'normal';
          clearTimeout(timer);
        }, 1000);
      }

      this.cdr.markForCheck();
    }, 1000);
  }

  ngOnDestroy(): void {
    clearInterval(this.interval);
  }
}
